<!--  -->
<template>
	<view class="order">
		<!-- 检测项目弹框 -->
		<uni-drawer ref="drawer1" mode="right" :mask-click="false">
			<scroll-view style="height: 100%;display: flex;flex-direction: column;" scroll-y="true" enable-flex="true">
				<view class="drawer-box">
					<view v-for="(item,i) in testItem" @click="selectTestItem(i)"
						:style="{background: item.flag ? 'aqua' : ''}" :key="i">{{item.productName}}</view>
				</view>

				<button @click="closeDrawer1" type="primary" class="drawer-btn"
					style="margin-bottom: 40rpx;">确定</button>
			</scroll-view>
		</uni-drawer>
		<!-- 样本类型弹框 -->
		<uni-drawer ref="drawer3" mode="right" :mask-click="false">
			<scroll-view style="height: 100%;display: flex;flex-direction: column;" scroll-y="true" enable-flex="true">
				<view class="drawer-box">
					<view v-for="(item,i) in sampleType" @click="selectSampleType(i)"
						:style="{background: item.flag ? 'aqua' : ''}" :key="i">{{item.sampleTypeName}}</view>
				</view>

				<button @click="closeDrawer3" type="primary" class="drawer-btn"
					style="margin-bottom: 40rpx;">确定</button>
			</scroll-view>
		</uni-drawer>
		<!-- 打开物流内样本弹框 -->
		<uni-popup ref="drawer2" type="bottom" :mask-click="true">
			<scroll-view style="height: 700rpx;display: flex;flex-direction: column; background-color: white;"
				scroll-y="true" enable-flex="true">
				<view class="drawer2-box">
					<view class="title">请选择样本</view>
					<checkbox-group @change="checkboxChange">
						<label class="uni-list-cell uni-list-cell-pd" v-for="(item, i) in sampleSave" :key="i">
							<view class="list">
								<view>
									<checkbox :value="item.sampleCode"/>
								</view>
								<view>{{item.sampleCode}}</view>
							</view>
						</label>
					</checkbox-group>
				</view>
				<button @click="closeDrawer2" type="primary" class="drawer-btn" style="margin-bottom: 0rpx;">确定</button>
			</scroll-view>
		</uni-popup>
		<!-- 加载动画 -->
		<loading ref="loading" :custom="false" :shadeClick="true" :type="1" :shadeShow="false">
		</loading>
		<!-- 进度条 -->
		<view class="order-step">
			<view v-for="(v,k) in title" :key='k' class="order-step-item" :class="swiperCurrent==k?'active':''"
				@tap="tabtap(k)">
				<view class="order-step-item-top">
					<view
						:style="{background:`${k!==swiperCurrent && '#e6e6e6;' }`,color:`${k!==swiperCurrent && '#c0c2c1'}`}"
						class="order-step-item-top-line">
					</view>
					<view class="order-step-item-top-dot"
						:style="{background:`${k!==swiperCurrent && '#f3f5f4' }`,color:`${k!==swiperCurrent && '#c0c2c1'}`}">
						{{k+1}}
					</view>
					<view
						:style="{backgroundColor:`${(k===title.length-1 && 'white') || (k!=swiperCurrent && '#e6e6e6') }`}"
						class="order-step-item-top-line"></view>
				</view>
				<text class="order-step-item-title">{{v}}</text>
			</view>
		</view>
		<!-- sweper -->
		<swiper class="order-swiper-box" @change="tabChange" :current="navIndex" :style="{height:swiperHeight}">
			<!-- 订单基本信息 -->
			<swiper-item>
				<swiper-view scroll-y="true" style="height: 100%;">
					<view class="order-basicInfo">
						<view class="order-basicInfo-item">
							<view class="title">订单编号:</view>
							<view class="value">{{orderInfo.batchCode}}</view>
						</view>
						<view class="order-basicInfo-item">
							<view class="title">创建人:</view>
							<view class="value">{{orderInfo.createdByName}}</view>
						</view>
						<view class="order-basicInfo-item">
							<view class="title">创建时间:</view>
							<view class="value">{{orderInfo.createdTime}}</view>
						</view>
					</view>
				</swiper-view>
			</swiper-item>
			<!-- 样品信息 -->
			<swiper-item>
				<swiper-view scroll-y="true" style="height: 100%;">
					<view class="order-sampleItem">
						<view class="order-sampleItem-item" @click="clickSampleItem('样本',i)"
							v-for="(item, i) in sampleItem" :key="i"
							:style="{background: item.flag === true ? '#0f90d1' : '#808080' }">
							<view class="">样本{{i+1}}</view>
							<image src="../../static/close.png" v-if="sampleItem.length > 1"
								style="width: 30rpx; height:30rpx" @click.stop="delSample('样本', i)"></image>
						</view>
					</view>
					<view class="order-sampleInfo">

						<view class="order-sampleInfo-item">
							<view class="left">
								<view class="title">样本编码</view>
								<view class="important">*</view>
							</view>
							<view class="right">
								<input placeholder="请输入样品编码" @blur="regularSmaoleCode" v-model="sample.sampleCode" />
							</view>
							<view class="scan">
								<image @click="scanCode" src="../../static/sm.png" mode=""></image>
							</view>
						</view>

						<view class="order-sampleInfo-item">
							<view class="left">
								<view class="title">样本类型</view>
								<view class="important">*</view>
							</view>
							<view class="right">
								<view class="right" @click="opendrawer3">
									<input placeholder="请选择样本类型" :disabled="true" v-model="sample.sampleType" />
								</view>
							</view>
						</view>

						<view class="order-sampleInfo-item">
							<view class="left">
								<view class="title">检测项目</view>
								<view class="important">*</view>
							</view>
							<view class="right" @click="opendrawer1">
								<input placeholder="请选择检测项目" :disabled="true" v-model="sample.chosedProjectNames" />
							</view>
						</view>

						<view class="order-sampleInfo-item">
							<view class="left">
								<view class="title">医院</view>
							</view>
							<picker @change="changeHospital" range-key="clientName" :range="hospital">
								<input placeholder="请输入医院" :disabled="true" v-model="sample.hospital" />
							</picker>
						</view>

						<view class="order-sampleInfo-item">
							<view class="left">
								<view class="title">采集时间</view>
							</view>
							<view class="right">
								<!-- <picker mode="date" :value="sample.collectTime" @change="changeSampeTime">
									<input placeholder="请选择时间" :disabled="true" v-model="sample.collectTime" />
								</picker> -->
								<uni-datetime-picker type="datetime" v-model="sample.collectTime" @change="changeSampeTime" />
							</view>
						</view>

						<view class="order-sampleInfo-item">
							<view class="left">
								<view class="title">姓名</view>
							</view>
							<view class="right">
								<input placeholder="请输入姓名" v-model="sample.sampleName" />
							</view>
						</view>

						<view class="order-sampleInfo-item">
							<view class="left">
								<view class="title">身份证号</view>
							</view>
							<view class="right">
								<input type="idcard" @blur="regidCard" placeholder="请输入身份证号" v-model="sample.idCard" />
							</view>
						</view>

						<view class="order-sampleInfo-item">
							<view class="left">
								<view class="title">年龄</view>
							</view>
							<view class="right">
								<input placeholder="请输入年龄" v-model="sample.age" />
							</view>
						</view>

						<view class="order-sampleInfo-item">
							<view class="left">
								<view class="title">性别</view>
							</view>
							<view class="right">
								<radio-group @change="changeSampleSex">
									<label class="radio" style="margin-right: 40rpx;">
										<radio value="男" :checked="sample.gender==='男'" />男
									</label>
									<label class="radio">
										<radio value="女" :checked="sample.gender==='女'" />女
									</label>
								</radio-group>
							</view>
						</view>

						<view class="order-sampleInfo-item">
							<view class="left">
								<view class="title">医生</view>
							</view>
							<view class="right">
								<input placeholder="请输入医生" v-model="sample.doctor" />
							</view>
						</view>

						<view class="order-sampleInfo-item">
							<view class="left">
								<view class="title">科室</view>
							</view>
							<view class="right">
								<input placeholder="请输入科室" v-model="sample.department" />
							</view>
						</view>

						<view class="order-sampleInfo-item">
							<view class="left">
								<view class="title">医院样本ID</view>
							</view>
							<view class="right">
								<input placeholder="请输入医院样本ID" v-model="sample.hospitalSampleIdt" />
							</view>
						</view>

						<view class="order-sampleInfo-item">
							<view class="left">
								<view class="title">项目编号</view>
							</view>
							<view class="right">
								<input placeholder="请输入项目编号" v-model="sample.projectId" />
							</view>
						</view>

						<view class="order-sampleInfo-item">
							<view class="left">
								<view class="title">住院ID</view>
							</view>
							<view class="right">
								<input placeholder="请输入住院ID" v-model="sample.clinicNo" />
							</view>
						</view>

						<view class="order-sampleInfo-item">
							<view class="left">
								<view class="title">样本量</view>
							</view>
							<view class="right">
								<input placeholder="请输入样本量" v-model="sample.sampleSize" />
							</view>
						</view>

						<view class="order-sampleInfo-item">
							<view class="left">
								<view class="title">采样部位</view>
							</view>
							<picker @change="changeSamplingPosition" range-key="codeName" :range="samplingPosition">
								<input placeholder="请输入采样部位" :disabled="true" v-model="sample.samplingPosition" />
							</picker>
						</view>

						<view class="order-sampleInfo-item">
							<view class="left">
								<view class="title">省份</view>
							</view>
							<view class="right">
								<input placeholder="请选择省份" v-model="sample.province" />
							</view>
						</view>

						<view class="order-sampleInfo-item">
							<view class="left">
								<view class="title">市县</view>
							</view>
							<view class="right">
								<input placeholder="请输入市县" v-model="sample.cityAndCounty" />
							</view>
						</view>

						<view class="order-sampleInfo-item">
							<view class="left">
								<view class="title">联系电话</view>
							</view>
							<view class="right">
								<input placeholder="请输入联系电话" v-model="sample.phone" />
							</view>
						</view>

						<view class="order-sampleInfo-item">
							<view class="left">
								<view class="title">是否报告</view>
							</view>
							<view class="right">
								<radio-group @change="changeSampleReport">
									<label class="radio" style="margin-right: 40rpx;">
										<radio value="是" :checked="sample.reportFlag==='是'" />是
									</label>
									<label class="radio">
										<radio value="否" :checked="sample.reportFlag==='否'" />否
									</label>
								</radio-group>
							</view>
						</view>

						<view class="order-sampleInfo-item">
							<view class="left">
								<view class="title">报告接收人</view>
							</view>
							<view class="right">
								<input placeholder="请输入报告接收人" v-model="sample.reportReceiver" />
							</view>
						</view>

						<view class="order-sampleInfo-item">
							<view class="left">
								<view class="title">邮箱地址</view>
							</view>
							<view class="right">
								<input placeholder="请输入邮箱地址" v-model="sample.reportReceiverEmail" />
							</view>
						</view>

						<view class="order-sampleInfo-item">
							<view class="left">
								<view class="title">纸质报告邮寄地址</view>
							</view>
							<view class="right">
								<input placeholder="请输入纸质报告邮寄地址" v-model="sample.reportReceiverAddress" />
							</view>
						</view>

						<view class="order-sampleInfo-item">
							<view class="left">
								<view class="title">人群类型 {{sample.crowdType}}</view>
							</view>
							<picker @change="changeCrowdType" range-key="codeName" :range="crowdType">
								<input placeholder="请输入人群类型" :disabled="true" v-model="sample.crowdType" />
							</picker>
						</view>

					</view>

					<view class="order-sampleButton">
						<view class="button" @click="addSample">
							新增样本
							<image src="../../static/tj.png"></image>
						</view>
					</view>

				</swiper-view>
			</swiper-item>
			<!-- 补充物流详情 -->
			<swiper-item>
				<swiper-view scroll-y="true" style="height: 100%;">
					<view class="order-sampleItem">
						<view class="order-sampleItem-item" @click="clickSampleItem('物流', i)"
							v-for="(item, i) in logisticsItem" :key="i"
							:style="{background: item.flag === true ? '#0f90d1' : '#808080' }">
							<view class="">物流{{i+1}}</view>
							<image src="../../static/close.png" v-if="logisticsItem.length > 1"
								style="width: 30rpx; height:30rpx" @click.stop="delSample('物流', i)"></image>
						</view>
					</view>

					<view class="order-sampleInfo">

						<view class="order-sampleInfo-item">
							<view class="left">
								<view class="title">物流订单号</view>
							</view>
							<view class="right">
								<input placeholder="请填写物流单号" v-model="logistics.courierNumber" />
							</view>
						</view>
						<view class="order-sampleInfo-item">
							<view class="left">
								<view class="title">配送公司</view>
							</view>
							<picker @change="changeCompany" range-key="codeName" :range="company">
								<input placeholder="请选配送公司" :disabled="true" v-model="logistics.courier" />
							</picker>
						</view>
						<view class="order-sampleInfo-item">
							<view class="left">
								<view class="title">物流内含样本</view>
							</view>
							<view class="right" @click="opendrawer2">
								<input placeholder="请选择样本" :disabled="true" v-model="logistics.sampleCodes" />
							</view>
						</view>
						<!-- 折叠面板 -->
						<uni-collapse accordion>
							<uni-collapse-item title="运输信息">

								<view class="order-sampleInfo-item">
									<view class="left">
										<view class="title">运输时限要求</view>
									</view>
									<view class="right">
										<input placeholder="请输入运输时限要求" v-model="logistics.transportTimeLimits" />
									</view>
								</view>

								<view class="order-sampleInfo-item">
									<view class="left">
										<view class="title">放置方式要求</view>
									</view>
									<view class="right">
										<input placeholder="请输入放置方式要求" v-model="logistics.placeTypeLimits" />
									</view>
								</view>

								<view class="order-sampleInfo-item">
									<view class="left">
										<view class="title">温度要求</view>
									</view>
									<view class="right">
										<input placeholder="请输入温度要求" v-model="logistics.transportTemperature" />
									</view>
								</view>

								<view class="order-sampleInfo-item">
									<view class="left">
										<view class="title">其他要求</view>
									</view>
									<view class="right">
										<input placeholder="请输入其他要求" v-model="logistics.otherRequirements" />
									</view>
								</view>

								<view class="order-sampleInfo-item">
									<view class="left">
										<view class="title">随附物件</view>
									</view>
									<view class="right">
										<input placeholder="请输入随附物件" v-model="logistics.companionItems" />
									</view>
								</view>

							</uni-collapse-item>

							<uni-collapse-item title="包裹接收信息">

								<view class="order-sampleInfo-item">
									<view class="left">
										<view class="title">收件人姓名</view>
									</view>
									<view class="right">
										<input placeholder="请输入收件人姓名" v-model="logistics.warpReceiverName" />
									</view>
								</view>

								<view class="order-sampleInfo-item">
									<view class="left">
										<view class="title">电话</view>
									</view>
									<view class="right">
										<input placeholder="请输入电话" v-model="logistics.warpReceiverPhone" />
									</view>
								</view>

								<view class="order-sampleInfo-item">
									<view class="left">
										<view class="title">邮箱</view>
									</view>
									<view class="right">
										<input placeholder="请输入邮箱" v-model="logistics.warpReceiverEmail" />
									</view>
								</view>

								<view class="order-sampleInfo-item">
									<view class="left">
										<view class="title">接收地址</view>
									</view>
									<view class="right">
										<input placeholder="请输入接收地址" v-model="logistics.receivingAddress" />
									</view>
								</view>

								<view class="order-sampleInfo-item">
									<view class="left">
										<view class="title">接收单位</view>
									</view>
									<view class="right">
										<input placeholder="请输入接收单位" v-model="logistics.receivingUnits" />
									</view>
								</view>

							</uni-collapse-item>

							<uni-collapse-item title="样本寄送信息">

								<view class="order-sampleInfo-item">
									<view class="left">
										<view class="title">送样人姓名</view>
									</view>
									<view class="right">
										<input placeholder="请输入送样人姓名" v-model="logistics.senderName" />
									</view>
								</view>

								<view class="order-sampleInfo-item">
									<view class="left">
										<view class="title">电话</view>
									</view>
									<view class="right">
										<input placeholder="请输入电话" v-model="logistics.senderPhone" />
									</view>
								</view>

								<view class="order-sampleInfo-item">
									<view class="left">
										<view class="title">邮箱</view>
									</view>
									<view class="right">
										<input placeholder="请输入邮箱" v-model="logistics.senderEmail" />
									</view>
								</view>

								<view class="order-sampleInfo-item">
									<view class="left">
										<view class="title">送样单位</view>
									</view>
									<view class="right">
										<input placeholder="请输入送样单位" v-model="logistics.senderUnits" />
									</view>
								</view>

								<view class="order-sampleInfo-item">
									<view class="left">
										<view class="title">送样地址</view>
									</view>
									<view class="right">
										<input placeholder="请输入送样地址" v-model="logistics.senderAddress" />
									</view>
								</view>


							</uni-collapse-item>

						</uni-collapse>

					</view>

					<view class="order-sampleButton">
						<view class="button" @click="addLogistics">
							新增物流
							<image src="../../static/tj.png"></image>
						</view>
					</view>

				</swiper-view>
			</swiper-item>
		</swiper>
		<!-- 按钮 -->
		<view class="order-form-submit">
			<view
				style="width: 100%;height: 100%;display: flex;justify-content: space-between;align-items: center;padding: 0 100rpx;">
				<view v-if="navIndex!=0" @click="save" class="order-form-submit-button2">{{navIndex==1 ? "保存样本" : "保存物流"}}</view>
				<view v-if="navIndex==0" @click="submitAll" class="order-form-submit-button3">提交</view>
			</view>

		</view>
	</view>
</template>

<script>
	import baseUrl from '../../utils/config.js'
	import imgUrl from '../../utils/imgUrl.js'
	import loading from '../../components/xuan-loading/xuan-loading.vue'
	export default {
		components: {
			loading
		},
		data() {
			return {
				orderInfo:{}, //接收跳转传来的参数
				title: ['订单基本信息', '样品信息 ', '补充物流详情'],
				navIndex: 0, // 流程swiper索引
				swiperCurrent: 0,
				sampleItem: [{
					flag: true
				}], // 样本数量
				logisticsItem: [{
					flag: true
				}], // 物流数量
				sampleSave: [], // 暂存样本
				logisticsSave: [], // 暂存物流
				sampleType: [], // 样品类型
				company: [], // 配送公司
				hospital:[], // 医院
				samplingPosition: [], // 采样部位
				crowdType: [], // 人群类型
				// 检测项目
				testItem: [],
				// 样品基本信息
				sample: {
					sampleCode: "",
					sampleType: '',
					chosedProjectNames: "",
					hospital: "",
					collectTime: "",
					sampleName: "",
					idCard: "",
					age: "",
					gender: "",
					gender: "",
					department: "",
					hospitalSampleIdt: "",
					projectId: "",
					clinicNo: "",
					sampleSize: "",
					samplingPosition: "",
					province: "",
					cityAndCounty: "",
					phone: "",
					reportFlag: "",
					reportReceiver: "",
					reportReceiverEmail: "",
					reportReceiverAddress: "",
					crowdType: "",
				},
				// 物流信息
				logistics: {
					courierNumber: "",
					courier: "",
					sampleCodes: "",
					transportTimeLimits: "",
					placeTypeLimits: "",
					transportTemperature: "",
					otherRequirements: "",
					companionItems: "",
					warpReceiverName: "",
					warpReceiverPhone: "",
					warpReceiverEmail: "",
					receivingAddress: "",
					receivingUnits: "",
					senderName: "",
					senderPhone: "",
					senderEmail: "",
					senderUnits: "",
					senderAddress: "",
				}

			}
		},
		onLoad(options) {
			// 获取跳转参数
			this.orderInfo = JSON.parse(decodeURIComponent(options.$data));
			// console.log("订单参数信息", this.orderInfo)
			this.getOrderData(this.orderInfo.id)
			// 获取下拉数据
			this.getPullData()
		},

		onShow() {},

		methods: {
			close: function() {
				this.$refs.loading.close();
			},
			open: function() {
				this.$refs.loading.open();
			},
			// 扫码功能
			scanCode(){
				let that = this;
				uni.scanCode({
					success: (res) => {
						console.log(res)
						that.sample.sampleCode = res.result;
					}
				})		
			},
			// 验证样品编号
			regularSmaoleCode() {
				let url = "batch/samplecode-check"
				uni.request({
					url: baseUrl + url,
					data: {
						sampleCode: this.sample.sampleCode,
						sampleId: this.sample.id || "",
					},
					//formdate格式
					header: {
						"Content-Type": "application/json",
						'token': uni.getStorageSync('token')
					},
					method: "POST",
					success: (res) => {
						if(res.data.status != 200){
							uni.showToast({
								title: res.data.msg,
								duration: 3000,
								icon: 'none'
							});
						}
						
					},
					fail: (res) => {
						uni.showToast({
							title: '连接错误，请检查网络设置',
							duration: 2000,
							icon: 'none'
						});
					},
				})
			},
			// 获取订单数据
			getOrderData(id) {
				let url = "batch/batch-data-search"
				uni.request({
					url: baseUrl + url,
					data: {
						batchId: id,
					},
					//formdate格式
					header: {
						"Content-Type": "application/json",
						'token': uni.getStorageSync('token')
					},
					method: "POST",
					success: (res) => {
						console.log('获取订单数据',res.data.data)
						
						if (res.data.status == 200) {
							let  data = res.data.data
							// 样本
							this.sampleSave = data.samples
							data.samples.map((item, i) => {
								if(i !== 0){
									this.sampleItem.push({flag: false})
								}else{
									this.sample = item
								}
							})
							// 物流
							this.logisticsSave = data.couiers
							data.couiers.map((item, i) => {
								if(i !== 0){
									this.logisticsItem.push({flag: false})
								}else{
									this.logistics = item
								}
							})
						}
					},
					fail: (res) => {
						uni.showToast({
							title: '连接错误，请检查网络设置',
							duration: 2000,
							icon: 'none'
						});
					},
				})
			},
			// 获取下拉数据
			getPullData() {
				let url = "batch/code-search"
				// 获取样本类型数据
				uni.request({
					url: baseUrl + url,
					data: {
						userId: uni.getStorageSync('userId'),
						selectCode: "sampletype",
					},
					//formdate格式
					header: {
						"Content-Type": "application/json",
						'token': uni.getStorageSync('token')
					},
					method: "POST",
					success: (res) => {
						// console.log('样本下拉数据',res.data.data)
						if (res.data.status == 200) {
							this.sampleType = res.data.data.map((item) => {
								item.flag = false
								return item
							})
						}
					},
					fail: (res) => {
						uni.showToast({
							title: '连接错误，请检查网络设置',
							duration: 2000,
							icon: 'none'
						});
					},
				})
				// 获取配送公司
				uni.request({

					url: baseUrl + url,
					data: {
						userId: uni.getStorageSync('userId'),
						selectCode: "courierCompany",
					},
					//formdate格式
					header: {
						"Content-Type": "application/json",
						'token': uni.getStorageSync('token')
					},
					method: "POST",
					success: (res) => {
						// console.log('配送公司下拉数据', res.data.data)
						if (res.data.status == 200) {
							this.company = res.data.data
						}
					},
					fail: (res) => {
						uni.showToast({
							title: '连接错误，请检查网络设置',
							duration: 2000,
							icon: 'none'
						});
					},

				})
				// 获取医院
				uni.request({
				
					url: baseUrl + url,
					data: {
						userId: uni.getStorageSync('userId'),
						selectCode: "hospital",
					},
					//formdate格式
					header: {
						"Content-Type": "application/json",
						'token': uni.getStorageSync('token')
					},
					method: "POST",
					success: (res) => {
						// console.log('医院', res.data.data)
						if (res.data.status == 200) {
							this.hospital = res.data.data
						}
					},
					fail: (res) => {
						uni.showToast({
							title: '连接错误，请检查网络设置',
							duration: 2000,
							icon: 'none'
						});
					},
				
				})
				// 获取采集部位
				uni.request({
				
					url: baseUrl + url,
					data: {
						userId: uni.getStorageSync('userId'),
						selectCode: "samplingPosition",
					},
					//formdate格式
					header: {
						"Content-Type": "application/json",
						'token': uni.getStorageSync('token')
					},
					method: "POST",
					success: (res) => {
						// console.log('采集部位', res.data.data)
						if (res.data.status == 200) {
							this.samplingPosition = res.data.data
						}
					},
					fail: (res) => {
						uni.showToast({
							title: '连接错误，请检查网络设置',
							duration: 2000,
							icon: 'none'
						});
					},
				
				})
				// 获取采集部位
				uni.request({
				
					url: baseUrl + url,
					data: {
						userId: uni.getStorageSync('userId'),
						selectCode: "crowdType",
					},
					//formdate格式
					header: {
						"Content-Type": "application/json",
						'token': uni.getStorageSync('token')
					},
					method: "POST",
					success: (res) => {
						// console.log('人群类型', res.data.data)
						if (res.data.status == 200) {
							this.crowdType = res.data.data
						}
					},
					fail: (res) => {
						uni.showToast({
							title: '连接错误，请检查网络设置',
							duration: 2000,
							icon: 'none'
						});
					},
				
				})
			},
			// 选择检测项目
			selectTestItem(i) {
				this.testItem = this.testItem.map((item, index) => {
					if (i === index) {
						item.flag = !item.flag
					}
					return item
				})
			},
			// 选择样本
			selectSampleType(i) {
				this.sampleType = this.sampleType.map((item, index) => {
					if (i === index) {
						item.flag = !item.flag
					}else{
						item.flag = false
					}
					return item
				})
			},
			// 选择样品时间
			changeSampeTime(e) {
				this.sample.collectTime = e
			},
			// 验证身份证
			regidCard(val) {
				let IdCard = val.detail.value
				var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;  
				if(reg.test(IdCard) === false){  
					uni.showToast({
						title: '身份证输入不合法',
						duration: 2000,
						icon: 'none'
					});
				}else{
					//获取年龄
					var ageDate = new Date()
					var month = ageDate.getMonth() + 1
					var day = ageDate.getDate()
					var age = ageDate.getFullYear() - IdCard.substring(6, 10) - 1
					if (IdCard.substring(10, 12) < month || IdCard.substring(10, 12) === month && IdCard.substring(12, 14) <= day) {
					    age++
					}
					if (age <= 0) {
					    age = 1
					}
					this.sample.age = age
					//获取性别
					if (parseInt(IdCard.substr(16, 1)) % 2 === 1) {
						this.sample.gender = "男"
					} else {
						this.sample.gender = "女"
					}
				}
			},
			// 选择性别
			changeSampleSex(e) {
				this.sample.gender = e.detail.value
			},
			// 选择死否报告
			changeSampleReport(e) {
				this.sample.reportFlag = e.detail.value
			},
			// 打开检测项目弹框
			opendrawer1() {
				//验证先选择样本类型才能根据类型选检测项目
				if(this.sample.sampleType) {
					let url = "batch/code-search"
					// 获取样本类型数据
					uni.request({
						url: baseUrl + url,
						data: {
							userId: uni.getStorageSync('userId'),
							selectCode: "productname",
							sampleType: this.sample.sampleType,
						},
						//formdate格式
						header: {
							"Content-Type": "application/json",
							'token': uni.getStorageSync('token')
						},
						method: "POST",
						success: (res) => {
							console.log('检测项目',res.data.data)
							if (res.data.status == 200) {
								this.testItem = res.data.data.map((item) => {
									item.flag = false
									return item
								})
							}
						},
					})
					this.$refs.drawer1.open()
				}else{
					uni.showToast({
						title: "请先选择样本类型",
						duration: 3000,
						icon: 'none'
					});
				}
				
			},
			// 打开样本弹框
			opendrawer3() {
				this.$refs.drawer3.open()
			},
			// 打开物流内样本弹框
			opendrawer2() {
				this.$refs.drawer2.open()
			},
			// 关闭检测项目弹框
			closeDrawer1() {
				let arr = []
				this.testItem.map((item, i) => {
					if (item.flag) {
						arr.push(item.productName)
					}
				})
				this.sample.chosedProjectNames = arr.toString()
				this.$refs.drawer1.close()
			},
			// 关闭样本弹框
			closeDrawer3() {
				this.sampleType.map((item, i) => {
					if (item.flag) {
						this.sample.sampleType = item.sampleTypeName
					}
				})
				this.$refs.drawer3.close()
			},
			// 关闭物流内样本弹框
			closeDrawer2() {
				this.$refs.drawer2.close()
			},
			// 增加样品
			addSample() {
				if (this.sampleSave.length === this.sampleItem.length) {
					this.sampleItem.map(item => {
						item.flag = false
					})
					this.sampleItem.push({
						flag: true
					})
					this.sample = {
						sampleCode: "",
						sampleType: "",
						chosedProjectNames: "",
						hospital: "",
						collectTime: "",
						sampleName: "",
						idCard: "",
						age: "",
						gender: "",
						gender: "",
						department: "",
						hospitalSampleIdt: "",
						projectId: "",
						clinicNo: "",
						sampleSize: "",
						samplingPosition: "",
						province: "",
						cityAndCounty: "",
						phone: "",
						reportFlag: "",
						reportReceiver: "",
						reportReceiverEmail: "",
						reportReceiverAddress: "",
						crowdType: "",
					}
				} else {
					uni.showToast({
						title: '请先暂存样本',
						icon: "error",
						duration: 2000
					});
				}
			},
			// 增加物流
			addLogistics() {
				if (this.logisticsSave.length === this.logisticsItem.length) {
					this.logisticsItem.map(item => {
						item.flag = false
					})
					this.logisticsItem.push({
						flag: true
					})
					this.logistics = {
						courierNumber: "",
						courier: "",
						sampleCodes: "",
						transportTimeLimits: "",
						placeTypeLimits: "",
						transportTemperature: "",
						otherRequirements: "",
						companionItems: "",
						warpReceiverName: "",
						warpReceiverPhone: "",
						warpReceiverEmail: "",
						receivingAddress: "",
						receivingUnits: "",
						senderName: "",
						senderPhone: "",
						senderEmail: "",
						senderUnits: "",
						senderAddress: "",
					}
				} else {
					uni.showToast({
						title: '请先暂存物流',
						icon: "error",
						duration: 2000
					});
				}
			},
			// 删除样本/物流
			delSample(flag, index) {
				let _this = this
				if (flag === '样本') { // 点击样本
					uni.showModal({
						title: '提示',
						content: '确认删除该样本?',
						success: function(res) {
							if (res.confirm) {
								let id = null
								_this.sampleSave.map((item,i) => {
									if(i === index){ // 找到需要删除的id
										id = item.id
									}
								})
								console.log('id',id)
								if(id){ //id存在调接口删除/否则直接删除
									
									_this.open()
									uni.request({
										url: baseUrl + "batch/delete-sample",
										data: {
											sampleId:id,
										},
										//formdate格式
										header: {
											"Content-Type": "application/json",
											'token': uni.getStorageSync('token')
										},
										method: "POST",
										success: (res) => {
											_this.close()
											if(res.data.status == 200){ 
												
												_this.sampleItem.splice(index, 1)
												_this.sampleSave.splice(index, 1)
												// 判断当前高亮样本是否被删(flag = false,则被删除 )
												let flag = _this.sampleItem.some(item => item.flag === true)
												if (!flag) {
													_this.sampleItem[_this.sampleItem.length - 1] = {
														flag: true
													}
													_this.sample = _this.sampleSave[_this.sampleItem.length - 1]
												}
												
											}else{ 
												uni.showToast({
													title: res.data.msg,
													duration: 3000,
													icon: 'none'
												});
											}
											
										},
										fail: (res) => {
											_this.close()
											uni.showToast({
												title: '连接错误，请检查网络设置',
												duration: 2000,
												icon: 'none'
											});e
										},
									})
									
								}else{
									_this.sampleItem.splice(index, 1)
									_this.sampleSave.splice(index, 1)
									// 判断当前高亮样本是否被删(flag = false,则被删除 )
									let flag = _this.sampleItem.some(item => item.flag === true)
									if (!flag) {
										_this.sampleItem[_this.sampleItem.length - 1] = {
											flag: true
										}
										_this.sample = _this.sampleSave[_this.sampleItem.length - 1]
									}
								}
								
							} else if (res.cancel) {}
						}
					});
				} else { // 点击物流
					uni.showModal({
						title: '提示',
						content: '确认删除该物流?',
						success: function(res) {
							if (res.confirm) {
								console.log('1',_this.logisticsSave)
								if( _this.logisticsSave[index]){ 
									
									_this.open()
									uni.request({
										url: baseUrl + "batch/delete-courier",
										data: {
											..._this.logisticsSave[index]
										},
										//formdate格式
										header: {
											"Content-Type": "application/json",
											'token': uni.getStorageSync('token')
										},
										method: "POST",
										success: (res) => {
											_this.close()
											if(res.data.status == 200){ 
												
												_this.logisticsItem.splice(index, 1)
												_this.logisticsSave.splice(index, 1)
												// 判断当前高亮物流是否被删(flag = false,则被删除 )
												let flag = _this.logisticsItem.some(item => item.flag === true)
												if (!flag) {
													_this.logisticsItem[_this.logisticsItem.length - 1] = {
														flag: true
													}
													_this.logistics = _this.logisticsSave[_this.logisticsItem.length - 1]
												}
												
											}else{ 
												uni.showToast({
													title: res.data.msg,
													duration: 3000,
													icon: 'none'
												});
											}
											
										},
										fail: (res) => {
											_this.close()
											uni.showToast({
												title: '连接错误，请检查网络设置',
												duration: 2000,
												icon: 'none'
											});e
										},
									})
									
								}else{
									
									_this.logisticsItem.splice(index, 1)
									_this.logisticsSave.splice(index, 1)
									// 判断当前高亮物流是否被删(flag = false,则被删除 )
									let flag = _this.logisticsItem.some(item => item.flag === true)
									if (!flag) {
										_this.logisticsItem[_this.logisticsItem.length - 1] = {
											flag: true
										}
										_this.logistics = _this.logisticsSave[_this.logisticsItem.length - 1]
									}
									
								}
								
								
							} else if (res.cancel) {}
						}
					});
				}

			},
			// 点击样本编号/物流编号
			clickSampleItem(flag, index) {
				if (flag === '样本') { // 点击样本
					let i = this.sampleItem.findIndex(item => item.flag === true)
					if (i === index) { // 点击当前
						return
					} else {
						//校验
						if(!this.sample.sampleCode) {
							uni.showToast({
								title: '样本编码必填',
								duration: 2000,
								icon: "none"
							});
							return;
						}
						if(!this.sample.sampleType) {
							uni.showToast({
								title: '样本类型必填',
								duration: 2000,
								icon: "none"
							});
							return;
						}
						if(!this.sample.chosedProjectNames.length) {
							uni.showToast({
								title: '检测项目必填',
								duration: 2000,
								icon: "none"
							});
							return;
						}
						// 验证样本编号
						this.open()
						uni.request({
							url: baseUrl + "batch/samplecode-check",
							data: {
								sampleCode: this.sample.sampleCode,
								sampleId: this.sample.id || "",
							},
							//formdate格式
							header: {
								"Content-Type": "application/json",
								'token': uni.getStorageSync('token')
							},
							method: "POST",
							success: (res) => {
								if(res.data.status == 200){ // 样本编号验证通过
									// 暂存
									uni.request({
										url: baseUrl + "batch/add-save-sample",
										data: {
											batchId: this.orderInfo.id,
											sampleData: this.sample,
											userinfo: uni.getStorageSync("userInfo")
										},
										//formdate格式
										header: {
											"Content-Type": "application/json",
											'token': uni.getStorageSync('token')
										},
										method: "POST",
										success: (res) => {
											this.close()
											if(res.data.status == 200){ 
												
												let i = this.sampleItem.findIndex(item => item.flag === true)
												this.sampleSave.splice(i, 1, this.sample)
												this.sampleItem.map(item => {
													item.flag = false
												})
												this.sampleItem[index] = {
													flag: true
												}
												this.sample = this.sampleSave[index]
												
											}else{ 
												this.close()
												uni.showToast({
													title: res.data.msg,
													duration: 3000,
													icon: 'none'
												});
											}
											
										},
										fail: (res) => {
											this.close()
											uni.showToast({
												title: '连接错误，请检查网络设置',
												duration: 2000,
												icon: 'none'
											});e
										},
									})		
									
								}else{ 
									uni.showToast({
										title: res.data.msg,
										duration: 3000,
										icon: 'none'
									});
								}
								
							},
							fail: (res) => {
								this.close()
								uni.showToast({
									title: '连接错误，请检查网络设置',
									duration: 2000,
									icon: 'none'
								});e
							},
						})	
						
					}
				} else { // 点击物流
					let i = this.logisticsItem.findIndex(item => item.flag === true)
					if (i === index) { // 点击当前
						return
					} else {
						if (this.logisticsSave.length === this.logisticsItem.length) {
							this.logisticsItem.map(item => {
								item.flag = false
							})
							this.logisticsItem[index] = {
								flag: true
							}
							this.logistics = this.logisticsSave[index]
						} else {
							uni.showToast({
								title: '请先暂存物流',
								icon: "error",
								duration: 2000
							});
						}
					}
				}


			},
			// 点击进度条
			tabtap(index) {
				
				if (this.navIndex == 0 && this.swiperCurrent > 1) {
					this.navIndex = this.swiperCurrent
				} else {
					this.swiperCurrent = index
					this.navIndex = index;
				}

			},
			// 页面滑动，改变进度条样式
			tabChange(e) {
				if (this.navIndex == 0 && this.swiperCurrent > 1) {
					this.navIndex = this.swiperCurrent
				} else {
					this.swiperCurrent = e.detail.current
					this.navIndex = e.detail.current
				}
				
				if(this.sampleItem.length !== this.sampleSave.length){  // 如果没有暂存，就自暂存行样本信息
					
					//校验
					if(!this.sample.sampleCode) {
						uni.showToast({
							title: '样本编码必填',
							duration: 2000,
							icon: "none"
						});
						return;
					}
					if(!this.sample.sampleType) {
						uni.showToast({
							title: '样本类型必填',
							duration: 2000,
							icon: "none"
						});
						return;
					}
					if(!this.sample.chosedProjectNames.length) {
						uni.showToast({
							title: '检测项目必填',
							duration: 2000,
							icon: "none"
						});
						return;
					}
					// 验证样本编号
					this.open()
					uni.request({
						url: baseUrl + "batch/samplecode-check",
						data: {
							sampleCode: this.sample.sampleCode,
							sampleId: this.sample.id || "",
						},
						//formdate格式
						header: {
							"Content-Type": "application/json",
							'token': uni.getStorageSync('token')
						},
						method: "POST",
						success: (res) => {
							if(res.data.status == 200){ // 样本编号验证通过
								// 暂存
								uni.request({
									url: baseUrl + "batch/add-save-sample",
									data: {
										batchId: this.orderInfo.id,
										sampleData: this.sample,
										userinfo: uni.getStorageSync("userInfo")
									},
									//formdate格式
									header: {
										"Content-Type": "application/json",
										'token': uni.getStorageSync('token')
									},
									method: "POST",
									success: (res) => {
										this.close()
										if(res.data.status == 200){ 
											
											let i = this.sampleItem.findIndex(item => item.flag === true)
											this.sample.id = res.data.data.id
											this.sampleSave.splice(i, 1, this.sample)
											
										}else{ 
											uni.showToast({
												title: res.data.msg,
												duration: 3000,
												icon: 'none'
											});
										}
										
									},
									fail: (res) => {
										this.close()
										uni.showToast({
											title: '连接错误，请检查网络设置',
											duration: 2000,
											icon: 'none'
										});e
									},
								})		
								
							}else{ 
								this.close()
								uni.showToast({
									title: res.data.msg,
									duration: 3000,
									icon: 'none'
								});
							}
							
						},
						fail: (res) => {
							this.close()
							uni.showToast({
								title: '连接错误，请检查网络设置',
								duration: 2000,
								icon: 'none'
							});e
						},
					})	
					
				}
				
				
			},
			// 选择样本(物流内含样本)
			checkboxChange(e) {
				this.logistics.sampleCodes = e.detail.value.toString()
			},
			// 选择配送公司
			changeCompany(e) {
				this.logistics.courier = this.company[e.detail.value].codeName
			},
			// 选择医院
			changeHospital(e){
				this.sample.hospital = this.hospital[e.detail.value].clientName
			},
			// 选择采集部位
			changeSamplingPosition(e){
				this.sample.samplingPosition = this.samplingPosition[e.detail.value].codeName
			},
			// 选择人群类型
			changeCrowdType(e){
				this.sample.crowdType = this.crowdType[e.detail.value].codeName
			},
			// 暂存
			save() {
				if (this.navIndex === 1) { // 样本暂存
					//校验 
					if(!this.sample.sampleCode) {
						uni.showToast({
							title: '样本编码必填',
							duration: 2000,
							icon: "none"
						});
						return;
					}
					if(!this.sample.sampleType.length) {
						uni.showToast({
							title: '样本类型必填',
							duration: 2000,
							icon: "none"
						});
						return;
					}
					if(!this.sample.chosedProjectNames.length) {
						uni.showToast({
							title: '检测项目必填',
							duration: 2000,
							icon: "none"
						});
						return;
					}
					
					// 验证样本编号
					this.open()
					uni.request({
						url: baseUrl + "batch/samplecode-check",
						data: {
							sampleCode: this.sample.sampleCode,
							sampleId: this.sample.id || "",
						},
						//formdate格式
						header: {
							"Content-Type": "application/json",
							'token': uni.getStorageSync('token')
						},
						method: "POST",
						success: (res) => {
							if(res.data.status == 200){ // 样本编号验证通过
								// 暂存
								uni.request({
									url: baseUrl + "batch/add-save-sample",
									data: {
										batchId: this.orderInfo.id,
										sampleData: this.sample,
										userinfo: uni.getStorageSync("userInfo")
									},
									//formdate格式
									header: {
										"Content-Type": "application/json",
										'token': uni.getStorageSync('token')
									},
									method: "POST",
									success: (res) => {
										this.close()
										if(res.data.status == 200){ 
											let index = this.sampleItem.findIndex(item => item.flag === true)
											this.sample.id = res.data.data.id
											this.sampleSave.splice(index, 1, this.sample)
											uni.showToast({
												title: "保存成功",
												duration: 3000,
												icon: 'none'
											});
											
										}else{ 
											uni.showToast({
												title: "保存失败",
												duration: 3000,
												icon: 'none'
											});
										}
										
									},
									fail: (res) => {
										this.close()
										uni.showToast({
											title: '连接错误，请检查网络设置',
											duration: 2000,
											icon: 'none'
										});e
									},
								})		
								
							}else{ 
								this.close()
								uni.showToast({
									title: res.data.msg,
									duration: 3000,
									icon: 'none'
								});
							}
							
						},
						fail: (res) => {
							this.close()
							uni.showToast({
								title: '连接错误，请检查网络设置',
								duration: 2000,
								icon: 'none'
							});e
						},
					})
					
				} else if (this.navIndex === 2) { // 物流暂存
				
					this.open()
					uni.request({
						url: baseUrl + "batch/add-save-courier",
						data: {
							courierData: this.logistics,
							userinfo: uni.getStorageSync("userInfo"),
							batchId: this.orderInfo.id
						},
						//formdate格式
						header: {
							"Content-Type": "application/json",
							'token': uni.getStorageSync('token')
						},
						method: "POST",
						success: (res) => {
							this.close()
							if(res.data.status == 200){ 
								
								let index = this.logisticsItem.findIndex(item => item.flag === true)
								this.logistics.id = res.data.data.id
								this.logistics.batchId = this.orderInfo.id
								this.logisticsSave.splice(index, 1, this.logistics)
								uni.showToast({
									title: "保存成功",
									duration: 3000,
									icon: 'none'
								});
								console.log(this.logisticsSave)
								
							}else{ 
								uni.showToast({
									title: res.data.msg,
									duration: 3000,
									icon: 'none'
								});
							}
							
						},
						fail: (res) => {
							this.close()
							uni.showToast({
								title: '连接错误，请检查网络设置',
								duration: 2000,
								icon: 'none'
							});e
						},
					})	
				
				}
			},
			// 提交
			submitAll() {
				let _this = this
				// 验证有无样本信息
				if(_this.sampleSave.length) {
					uni.showModal({
						title: '提示',
						content: '请确认信息有无暂存?',
						success: function(res) {
							if (res.confirm) {
								_this.open()
								uni.request({
									url: baseUrl + "batch/batch-submit",
									data: {
										id: _this.orderInfo.id,
										userinfo: uni.getStorageSync("userInfo")
									},
									//formdate格式
									header: {
										"Content-Type": "application/json",
										'token': uni.getStorageSync('token')
									},
									method: "POST",
									success: (res) => {
										if(res.data.status == 200){ 
											_this.close()
											uni.redirectTo({
												url: '../orderView/orderView'
											});
										}else{ 
											_this.close()
											uni.showToast({
												title: res.data.msg,
												duration: 3000,
												icon: 'none'
											});
										}
										
									},
									fail: (res) => {
										_this.close()
										uni.showToast({
											title: '连接错误，请检查网络设置',
											duration: 2000,
											icon: 'none'
										});e
									},
								})	
							} else if (res.cancel) {}
						}
					});
				}else{
					uni.showToast({
						title: '无样本信息',
						duration: 2000,
						icon: "error"
					});
				}
				
			},

		}
	}
</script>

<style lang="scss">
	.order {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #f6f7f9;
		font-size: 32rpx;
		position: relative;

		.drawer2-box {
			margin-bottom: 120rpx;

			.title {
				height: 120rpx;
				font-weight: bold;
				line-height: 120rpx;
				text-align: center;
			}

			.list {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100rpx;
				border-bottom: 1px solid #f6f7f9;
			}
		}

		&-sampleButton {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #fff;

			.button {
				background-color: #0f90d1;
				padding: 20rpx;
				color: white;
				border-radius: 15rpx;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-left: 10rpx;
				}
			}

		}

		&-basicInfo {
			margin: 20rpx;
			background-color: white;
			padding: 10rpx;

			&-item {
				display: flex;
				justify-content: space-between;
				margin: 10rpx;
			}
		}

		&-sampleItem {
			background-color: white;
			padding-top: 20rpx;
			margin: 15rpx 0;
			display: flex;
			flex-wrap: wrap;

			&-item {
				margin: 0 20rpx 20rpx;
				display: flex;
				width: 150rpx;
				height: 50rpx;
				color: white;
				border-radius: 10rpx;
				background-color: #0f90d1;
				justify-content: space-evenly;
				align-items: center;
			}
		}

		&-sampleInfo {
			padding: 20rpx 0rpx;
			background-color: #fff;

			&-item {
				height: 80rpx;
				padding: 0 40rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #f6f7f9;

				.left {
					height: 80rpx;
					display: flex;
					align-items: center;
					width: 250rpx;

					.important {
						color: red;
					}
				}

				.right {
					flex: 1;
				}
				
				.scan{
					&>image{
						width: 70rpx;
						height: 70rpx;
					}
				}
			}
		}

		&-modal {

			&-content {
				background-color: white;
				height: 700rpx;
				width: 100%;
				// position: absolute;
				transition-duration: 0.3s;
				border-radius: 20rpx 20rpx 0 0;

				&-option {
					display: flex;
					justify-content: space-between;
					height: 90rpx;
					border-bottom: #f6f6f6 1px solid;
					font-size: 32rpx;

					text {
						height: 100%;
						display: flex;
						align-items: center;
						letter-spacing: 2rpx;
					}

				}

				&-box {
					display: flex;
					flex-direction: column;
					height: 610rpx;
					width: 100%;
					overflow-y: auto;
					padding: 32rpx 0;

					&-item {
						display: flex;

						min-height: 80rpx;
						flex-shrink: 0;
						flex-grow: 0;
						padding-left: 50rpx;
						align-items: center;
						font-size: 30rpx;

						image {
							height: 50rpx;
							width: 50rpx;
							margin-right: 24rpx;
						}
					}
				}
			}

			&-mask {
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.5);
			}
		}

		&-step {
			width: 100%;
			background-color: white;
			position: relative;
			display: flex;

			&-mask {
				width: 100%;
				height: 20rpx;
				background-color: white;
				position: absolute;
				bottom: 0;
				z-index: 666;
			}

			&-item {
				display: flex;
				flex-direction: column;
				width: 187rpx;
				height: 160rpx;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;
				flex-grow: 0;

				&-title {
					font-size: 24rpx;
				}

				text {
					color: #3185b1;
					margin-top: 16rpx;
				}

				&-top {
					display: flex;
					width: 100%;
					align-items: center;
					justify-content: center;

					&-line {
						display: flex;
						flex: 1;
						height: 4rpx;
						background-color: #418aad;
					}

					&-dot2 {
						width: 50rpx;
						height: 50rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 50%;
						border: 4rpx solid #1ea6bc;

						image {
							width: 30rpx;
							height: 30rpx;
						}
					}

					&-dot {
						width: 50rpx;
						height: 50rpx;
						background-image: linear-gradient(to bottom, #22e3a2, #1098cc);
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 24rpx;
						color: white;
					}
				}
			}
		}

		&-swiper-box {
			flex: 1;
			overflow: auto;

			swiper-item {
				overflow: auto;
			}

		}

		&-form {
			background-color: #f6f7f9;
			height: calc(100vh - 160rpx);
			overflow-y: scroll;

			&-sample {
				display: flex;
				flex-wrap: wrap;
				background-color: white;
				min-height: 100rpx;
				padding: 20rpx 0 0 16rpx;

				&-item {
					background-color: #0f90d1;
					height: 60rpx;
					font-size: 30rpx;
					padding: 0 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: white;
					border-radius: 10rpx;
					margin-bottom: 20rpx;
					margin-right: 28rpx;
					opacity: .5;

					image {
						width: 20rpx;
						height: 20rpx;
						margin-left: 16rpx;
					}
				}

				.active {
					opacity: 1;
				}
			}

			&-submit {
				width: 100%;
				height: 100rpx;
				background-color: #f6f7f9;
				display: flex;
				align-items: center;
				justify-content: center;

				&-button2 {
					height: 66rpx;
					width: 100%;
					border-radius: 45rpx;
					color: white;
					background-image: linear-gradient(to right, #15b1bd, #1095cd);
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 30rpx;
					border: 1px solid #bebfc3;
				}

				&-button3 {
					height: 66rpx;
					width: 100%;
					background-image: linear-gradient(to right, #15b1bd, #1095cd);
					border-radius: 45rpx;
					color: white;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 30rpx;
				}
			}
		}

	}

	.drawer-box {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 70px;
	}

	.drawer-box view {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgb(242, 242, 242);
		margin-top: 30rpx;
		border-radius: 30rpx;
		padding: 20rpx 40rpx;
		font-size: 28rpx;
		margin-left: 20rpx;
		letter-spacing: 1rpx;
		font-weight: 300;
		box-sizing: border-box;
		border: 1rpx solid white;
	}

	.drawer-box .select {
		background-color: rgb(251, 238, 232);
		color: #15b1bd;
		border: 0.01rem solid #15b1bd;
	}

	.drawer-btn {
		width: 80%;
		border-radius: 30rpx;
		position: fixed;
		bottom: 0;
		left: 10%;
		background-image: linear-gradient(to right, #15b1bd, #1095cd);
	}
</style>
